<template>
	<div class="go-edit-group-box">
		<edit-shape-box
			:key="groupData.id"
			:data-id="groupData.id"
			:index="groupIndex"
			:item="groupData"
			:hiddenPoint="true"
			:class="animationsClass(groupData.styles.animations)"
			:style="{
				...useComponentStyle(groupData.orgConfig.attr),
				...useSizeStyle(groupData.orgConfig.attr),
				...getTransformStyle(groupData.styles)
			}"
			@click="mouseClickHandle($event, groupData)"
			@mousedown="mousedownHandle($event, groupData)"
			@mouseenter="mouseenterHandle($event, groupData)"
			@mouseleave="mouseleaveHandle($event, groupData)"
			@contextmenu="handleContextMenu($event, groupData, optionsHandle)"
		>
			<template v-for="item in groupData.groupList" :key="item.id">
				<template v-if="!item.parentId">
					<!-- 组合组件 -->
					<edit-shape-box
						:key="item.id"
						:data-id="item.id"
						:index="groupIndex"
						:item="item"
						:hiddenPoint="true"
						:style="{
							...useComponentStyle(item.orgConfig.attr)
						}"
					>
						<component
							class="edit-content-chart"
							:class="animationsClass(item.styles.animations)"
							:is="item.name"
							:config="item.orgConfig"
							:id="item.id"
							:style="{
								...useSizeStyle(item.orgConfig.attr),
								...getTransformStyle(item.styles)
							}"
						/>
					</edit-shape-box>
				</template>
			</template>
		</edit-shape-box>
	</div>
</template>

<script setup>
import { EditShapeBox } from '../../components/EditShapeBox';
import { MenuEnum } from '@/enums/editPageEnum';
import { animationsClass, getTransformStyle } from '@/utils';
import { handleContextMenu } from '@/views/chart/hooks/useContextMenu.hook';
import { useMouseHandle } from '../../hooks/useDrag.hook';
import { useComponentStyle, useSizeStyle } from '@/utils';

defineProps({
	groupData: {
		type: Object,
		required: true
	},
	groupIndex: {
		type: Number,
		required: true
	}
});

// 点击事件
const { mouseenterHandle, mouseleaveHandle, mousedownHandle, mouseClickHandle } = useMouseHandle();

// 右键
const optionsHandle = (targetList, allList, targetInstance) => {
	const filter = (menulist) => allList.filter((i) => menulist.includes(i.key));

	// 多选处理
	if ($store.chart.targetChart.selectId.length > 1) {
		return filter([MenuEnum.GROUP, MenuEnum.DELETE]);
	} else {
		const statusMenuEnums = [];
		if (targetInstance.status.lock) {
			statusMenuEnums.push(MenuEnum.LOCK);
		} else {
			statusMenuEnums.push(MenuEnum.UNLOCK);
		}
		if (targetInstance.status.hide) {
			statusMenuEnums.push(MenuEnum.HIDE);
		} else {
			statusMenuEnums.push(MenuEnum.SHOW);
		}
		// 单选
		const singleMenuEnums = [MenuEnum.UN_GROUP];
		return [
			...filter(singleMenuEnums),
			{ divider: true },
			...targetList.filter((i) => !statusMenuEnums.includes(i.key))
		];
	}
};
</script>
